<template>
    <div style="margin: 50px">
      <el-container>
        <el-header>
          <!-- <topBarA/>
          <manage_menu/> -->
        </el-header>
        <el-main>
          <el-card v-for="(item,index) in work_sheet_form_list" :key="index" class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{ item.status }}</span>
                  <el-button class="button" @click="toDetails(item)">详情</el-button>
                </div>
              </template>
                <div style="height: 200px">
                  <p>产线信息：{{ item.product_line }}</p>
                  <p>设备名称：{{ item.device_name }}</p>
                  <p>设备地址：{{ item.device_location }}</p>
                  <p>维护任务描述：{{ item.task_detail }}</p>
                  <p>工单号：{{ item.id }}</p>
                </div>
              <!-- <template #footer>Footer content</template> -->
          </el-card>
        </el-main>
      </el-container>
    </div>
  </template>

<script setup>
    import { onBeforeMount, reactive, ref} from 'vue'
    import axios from 'axios'
    import { useRouter } from 'vue-router'
    
    //数据域
    const state = reactive({});//复杂的响应式数据
    const api_data = ref([]);//定义基本数据或简单对象响应式数据
    const format_data = ref([]);
    const router = useRouter();
    const work_sheet_form_list = ref([]);

    //  网络请求相关对象
    const API = axios.create({
      baseURL:'http://10.112.16.136:8018/cloudForm',
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    })

    //这里应该传入自己写的数据库的数据（主要用uid）
    let global_info = {
     uid:'100291',
     account:'222', 
     type:'工长'
    }
    // let global_info = {
    //  uid:'100290',
    //  account:'111', 
    //  type:'主管'
    // }
    
    //钩子函数
    onBeforeMount(async() => {
      if (global_info.type === '主管'){
        getAllFormIdByUid('2021210029');
        //console.log('我是主管');
      }
      else{
        getAllFormIdByUid(global_info.uid);
        //console.log('我不是主管');
      }
      //console.log(work_sheet_form_list.value)
      //async函数执行后返回Promise对象,其代表一个异步操作(函数执行完，拿到数据，才解除等待)
    })

    //方法区
    //  获取uid下的所有表单
    function getAllFormIdByUid(uid){
      let cur_url = "/getAllFormByUid/" + uid
      console.log('获取所有表单')
      API({
        url:cur_url,
        method:'get',
      }).then((res)=>{
        let id_list = res.data.data;
        //console.log(res);
        for(let i=0; i<id_list.length; i++) {
          //let cur_record_id = id_list[i]['id']    //记录表单id的表单，非工单id
          let work_sheet_id = id_list[i]['form']['id']  //该员工相关工单id
          getFormById(work_sheet_id)
        }
      })}

    //  根据ID获取表单
    function getFormById(formId){
      let cur_url = "/getFormById/" + formId
      API({
        url:cur_url,
        method:"GET"
      }).then((res)=>{
        //work_sheet_form_list.value.push(res.data.data.form)
        if(res.data.data.form.status==='待分配'){
            work_sheet_form_list.value.push(res.data.data.form)
        }
      })
    }
    
    //点击按钮，跳转详情页面
    function toDetails(item){
      console.log(item.form);
      router.push({
        path: '/details',
        //query: item.form
        //这里传参不会写
      })
    }

</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 0px;
  margin-top: 10px;
}

.box-card {
  width: 480px;
}
</style>
